<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <a-form :model="form" label-width="80px">
      <a-row>
        <a-col :span="8" :offset="2">
          <a-form-item label="用户昵称" prop="nickName">
            <a-input v-model="form.nickName" disabled/>
          </a-form-item>
        </a-col>
        <a-col :span="8" :offset="2">
          <a-form-item label="登录账号" prop="userName">
            <a-input v-model="form.userName" disabled/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <h4 class="form-header h4">角色信息</h4>
    <a-table v-loading="loading" row-key="roleId" :pagination="false" :row-selection="rowSelection"
             v-model:selectedKeys="roleIds" ref="roleRef"
             :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
      <template #columns>
        <a-table-column title="序号" width="85" align="center">
          <template #cell="{ column, record, rowIndex }">
            <span>{{
                pageSize * (pageNum - 1) + rowIndex + 1
              }}</span>
          </template>
        </a-table-column>
        <a-table-column title="角色编号" align="center" data-index="roleId"/>
        <a-table-column title="角色名称" align="center" data-index="roleName"/>
        <a-table-column title="权限字符" align="center" data-index="roleKey"/>
        <a-table-column title="创建时间" align="center" data-index="createTime" width="180"/>
      </template>
    </a-table>

    <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"/>

    <a-form label-width="100px">
      <div style="text-align: center;margin-left:-120px;margin-top:30px;">
        <a-button class="button-margin-right" size="small" type="primary" @click="submitForm()">提交</a-button>
        <a-button size="small" @click="close()">返回</a-button>
      </div>
    </a-form>
  </div>
</template>

<script setup name="AuthRole">
import {getAuthRole, updateAuthRole} from "@/api/system/user";
import {useRoute} from "vue-router";
import {getCurrentInstance, ref} from "vue";

const route = useRoute();
const {proxy} = getCurrentInstance();

const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const roleIds = ref([]);
const roles = ref([]);
const form = ref({
  nickName: undefined,
  userName: undefined,
  userId: undefined
});

/** 开启多选 */
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});

/** 多选框选中数据 */
const selectedKeys = ref([]);

/** 保存选中的数据编号 */
function getRowKey(row) {
  return row.roleId;
}

/** 关闭按钮 */
function close() {
  const obj = {path: "/system/user"};
  proxy.$tab.closeOpenPage(obj);
}

/** 提交按钮 */
function submitForm() {
  const userId = form.value.userId;
  const rIds = roleIds.value.join(",");
  updateAuthRole({userId: userId, roleIds: rIds}).then(response => {
    proxy.$message.success("授权成功");
    close();
  });
}

(() => {
  const userId = route.params && route.params.userId;
  if (userId) {
    loading.value = true;
    getAuthRole(userId).then(response => {
      form.value = response.user;
      roles.value = response.roles;
      total.value = roles.value.length;
      nextTick(() => {
        roles.value.forEach(row => {
          if (row.flag) {
            proxy.$refs["roleRef"].toggleRowSelection(row);
          }
        });
      });
      loading.value = false;
    });
  }
})();
</script>
